<template>
    <div class="user-list">
        <div id="myDIV">
            <waterfall
                    :line-gap="250"
                    :max-line-gap="360"
                    :min-line-gap="220"
                    :fixed-height="true"
                    :watch="items"
                    align="center"
            >
                <!-- each component is wrapped by a waterfall slot -->
                <waterfall-slot
                        v-for="(item, index) in items"
                        :width="250"
                        :height="186"
                        :order="index"
                        :key="item.id"
                >
                    <div>
                        <v-usercomp
                                :item="item"
                                :index="index"
                                class="item"
                                :backSelectItems="selectItems"
                                :backItems="getCurrentSelectItems"
                                :isMutpart="true"
                                :currentRadio="currentRadio"
                        >

                            <div class="role l1">
                                {{item.ujname}}
                        </div>


                        </v-usercomp>
                    </div>

                </waterfall-slot>
            </waterfall>
        </div>
    </div>
</template>
<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vUsercomp from '../../common/UserComp.vue';
    import vSimpsearch from '../SimpSearch.vue';
    export default {
        name: 'keepAlive',
        components: {
            vUsercomp, Waterfall, WaterfallSlot, vSimpsearch
        },
        props: {
            param: '',
            dblNextClick:{       //点击跳转下一步
                type:Function,
//                default:function(){alert("并未实现查看接口");},
                required:false
            }
        },
        data: function () {
            return {
                currentRadio: {index: -1},
                loading: true,
                allItems: [],
                selectItems: [],
                items: [],
                rows: 20,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                userItem: [],
                isGoods: true,
                isMultiselect: false,
                list: []
            }
        },
        created:function () {
            this.page =1;
            this.totalPage=1;
            this.loadMore();

        },
        activated:function () {
            console.log("=============>activated")
            this.$$("#content").scrollTop(0)
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
            this.$$(window).resize();
        },
        deactivated:function () {
            this.$$("#content").off('scroll');
        },
        mounted: function () {

        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            }
        },
        methods: {
            getNum: function (res) {
                this.list = res;
                console.log(this.list);

            },
            loadMore: function () {
                console.log("==============>loadMore")
                let self = this;
                if (this.page <= this.totalPage) {
                    self.loading = true;
                    this.$axioxs.get("/user/prize/jobs/?state=1&params=" + this.param + "&rows=" + this.rows + "&page=" + this.page)
                        .then(function (res) {
                          console.log(res)
                            self.totalPage = res.data.totalPage;
                            self.allItems = res.data.records;
                            self.allItems.forEach(item => {
                                item.height = 265;
                                item.width = 300;
                                self.items.push(item);
                            });
                            self.loading = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: error,
                                onClose: function () {
                                    self.loading = false;
                                }
                            });
                        });
                }
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
                this.$emit('transferEmployee', items)
            },
            getParam(res){
                this.param = res;
            }

        },

    }

</script>

<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    .simple-search .el-input__inner {
        border-radius: 20px;
    }

    .search-part {
        width: 100%;
    }

    .w-user {
        margin: 0px 20px;
        background-color: #fff;
    }

    .search-layout {
        padding: 10px;
        background-color: #fff;
    }

    .text {
        margin-bottom: 1em;
    }

    .text h6 {
        margin-bottom: 5px;
    }

    .span1 {
        background-color: #3eb3f9;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .span2 {
        background-color: #6699ff;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .remark {
        padding: 3px 0;
    }

    .l1 {
        height: 21px;
    }
</style>
